<template>
  <div class="trade-container">
    <div>
      <el-button type="primary" @click="addInfo">新增</el-button>
    </div>
    <div>
      <el-table ref="multipleTable" :data="tableData.data" tooltip-effect="dark" stripe highlight-selection-row max-height="750">
        <el-table-column prop="cnName" label="证件类型"></el-table-column>
        <el-table-column prop="enName" label="证件类型英文名"></el-table-column>
        <el-table-column prop="cardTypeTwo" label="二类证别名"></el-table-column>
        <el-table-column prop="typeName" label="证件类型"></el-table-column>
        <el-table-column label="删除">
          <template #default="scope">
            <el-link type="primary" style="margin-right: 10px" @click="update(scope.row)">修改</el-link>
            <el-link type="danger" @click="del(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 30px">
        <el-pagination background layout="prev, pager, next" :page-size="15" :total="pageTotal" @current-change="currentChange"/>
      </div>
    </div>
  </div>
  <el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose">
    <div>
      <div class="card-select-item">
        <span>证件类型:</span>
        <el-input v-model="form.cnName" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="card-select-item">
        <span>证件类型英文名:</span>
        <el-input v-model="form.enName" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="card-select-item">
        <span>二类证别名:</span>
        <el-input v-model="form.cardTypeTwo" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="card-select-item">
        <span>证件种类:</span>
        <el-radio-group v-model="form.certKind">
          <el-radio v-for="item in cardAllType.data" :value="item.id">{{ item.typeName }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addData">添加</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from "vue";
import {_addCardType, _delCardType, _getCardAllType, _getCardTypeList, _updateCardType} from "../../http/api.js";
import {ElLoading, ElMessage, ElMessageBox, ElNotification} from "element-plus";

const pageTotal = ref(); // 总数
let pageIndex = ref(1);
const tableData = reactive({ // 列表
  data:[]
})
const cardAllType = reactive({ // 证件种类
  data:[]
})
const dialogVisible = ref(false);// 弹框显示
const form = ref({
  cnName:'',
  enName:'',
  cardTypeTwo:'',
  certKind:'',
})
const dataId = ref('')

//获取证件类型列表
const getCardTypeList = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _getCardTypeList(pageIndex.value)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok){
          let item = res.data.data;
          pageTotal.value = item.total;
          tableData.data = item.records;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage.error('网络异常请重试')
      })
}
getCardTypeList();

// 获取人车类型列表
const getCardAllType = () => {
  _getCardAllType()
      .then(res => {
        console.log(res);
        if(res.data.ok){
          cardAllType.data = res.data.data;
        }
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('网络异常请重试')
      })
}
getCardAllType()
// 删除
const del = (id) => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _delCardType(id)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage.success('删除成功')
          getCardTypeList();
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage.error('网络异常请重试')
      })
}

// 新增点击
const addInfo = () => {
  dialogVisible.value = true;
}
// 修改点击
const update = ({id,cnName,enName,cardTypeTwo,certKind}) => {
  dataId.value = id;
  form.value.cnName = cnName;
  form.value.enName = enName;
  form.value.cardTypeTwo = cardTypeTwo;
  form.value.certKind = certKind;
  dialogVisible.value = true;
}
// 添加数据
const addData = () => {
  if(dataId.value) {
    updateInfo(dataId.value)
  }else {
    const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
    _addCardType({ ... form.value })
        .then(res => {
          console.log(res);
          loading.close();
          if(res.data.ok) {
            ElMessage.success('添加成功')
            getCardTypeList();
            dialogVisible.value = false;
            form.value.cnName = '';
            form.value.enName = '';
            form.value.cardTypeTwo = '';
            form.value.certKind = '';
          }
        })
        .catch(err => {
          console.log(err);
          loading.close();
          ElMessage.error('网络异常请重试')
        })
  }
}
// 弹框关闭
const handleClose = () => {
  dialogVisible.value = false;
}
// 修改证件
const updateInfo = (id) => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _updateCardType({ ... form.value,id})
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage.success('更新成功')
          getCardTypeList();
          dialogVisible.value = false;
          form.value.cnName = '';
          form.value.enName = '';
          form.value.cardTypeTwo = '';
          form.value.certKind = '';
          dataId.value = '';
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage.error('网络异常请重试')
      })
}
// 分页
const currentChange = (index) => {
  pageIndex.value = index;
  getCardTypeList();
}
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
.card-select-item{
  margin-bottom: 10px;
  span{
    display: inline-block;
    margin-right: 10px;
    width: 140px;
  }
}
</style>
